<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>
	<button>GET</button>
	<button>POST</button>
	<button>DELETE</button>
	<button>PUT</button>
	<button>PATCH</button>
</body>
<script>
	const btns = document.querySelectorAll("button");
	btns[0].onclick = async function(){
		// 1- windows
		// console.log(window.fetch);
		// 2- 省略
		// console.log(fetch);
		
		// 发送请求，默认请求方式为GET
		// fetch("http://zhangpeiyue.com/scoreList/1")
		
		// fetch函数返回的是一个Promise实例,成功值为Response实例，该实例原型中拥有text json
		// const result =fetch("http://zhangpeiyue.com/scoreList/1");
		// console.log(result);
		
		// fetch("http://zhangpeiyue.com/scoreList/2").then(value=>{
		// 	// text调用返回的结果是Promise实例，成功值为响应体数据（文档，文本）
		// 	// console.log(value.text());
		// 	// value.text().then(res=>{
		// 	// 	console.log(res);// 响应体
		// 	// })
		//
		// 	// json调用返回的结果是Promise实例，成功值的为响应体数据（JSON对象）
		// 	// console.log(value.json());
		// 	value.json().then(res=>{
		// 		console.log(res);
		// 	})
		// })
		
		// 获取响应体方式1
		// fetch("http://zhangpeiyue.com/scoreList/1").then(value=>{
		// 	value.json().then(res=>{
		// 		console.log(res);
		// 	})
		// })
		
		// 获取响应体方式2
		// fetch("http://zhangpeiyue.com/scoreList/1")
		// 		.then(value=>value.json())
		// 		.then(res=>{
		// 			console.log(res);
		// 		})
		
		// const value = fetch("http://zhangpeiyue.com/scoreList/1");
		// const p = value.then(value=>{
		// 	return value.json();
		// })
		//  p.then(res=>{
		// 	 console.log(res);
		//  })
		
		
		// 获取响应体方式3
		// const res = await fetch("http://zhangpeiyue.com/scoreList/1").then(value=>value.json());
		// console.log(res);
		
		// 获取响应体方式4
		// const value = await fetch("http://zhangpeiyue.com/scoreList/1");
		// const res = await value.json();
		// console.log(res);
		
	}
	btns[1].onclick = async function(){
		// application/json
		// fetch("http://zhangpeiyue.com/scoreList",{
		// 	method:"post",// 指定请求方式
		// 	headers:{
		// 		// 设置请求头
		// 		"Content-Type":"application/json"
		// 	},
		// 	// 设置请求体
		// 	body:JSON.stringify({
		// 		userName:"吴京",
		// 		age:50
		// 	})
		// }).then(value=>value.json)
		// 		.then(res=>{
		// 			console.log(res);// 响应体
		// 		})
		
		
		// application/x-www-form-urlencoded
		try{
			const value = await fetch("http://zhangpeiyue.com/scoreList",{
				method:"post",
				headers:{
					"Content-Type":"application/x-www-form-urlencoded"
				},
				body:"userName=古力娜扎&age=30"
			});
			const res = await value.json();
			console.log(res);
		}catch (err){
			console.log(1111,err);
		}
		
	}
</script>
<script type="module">
	import ajax from "./lib/ajax.js"
	ajax({
		url:"http://zhangpeiyue.com/scoreList"
	})
</script>
</html>